<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
    </div>
    <script>
        // 事件的传播 ：  先捕获 （从大到小触发事件 window --->doucument--->html-->body--->父元素--->中间元素-->子元素）--->目标元素--->事件的冒泡 （由小到大触发）;

        // 一、目标元素 ： 事件再哪里触发 那么这个元素就是目标元素；
        // 获取目标元素： e.target 
        // 如果是IE8及一下  e.srcElement; 

        // var containerEle = document.querySelector(".container");
        // containerEle.onclick = function(e){
        //     var target = e.target || e.srcElement;
        //     console.log(target); // 事件再哪个元素上触发 就是哪个元素 ；
        //     console.log(this); // 事件源 
        // }

        // 二、阻止事件的传播 ；
        // 1.e.stopPropagation()  2.e.cancelBubble = true;
        // var containerEle = document.querySelector(".container");
        // var innerEle = document.querySelector(".inner");
        // innerEle.onclick = function(e){
        //     console.log("innner");
        //     e.stopPropagation(); // 阻止事件传播；
        //     // e.cancelBubble = true;
        // }

        // containerEle.onclick = function(){
        //     console.log("container");
        // }

        //三、 有些事件是不会触发 冒泡 ：
        // onmouseenter 、onmouseleave  blur  focus ：没有冒泡机制 ；
        // onmouseover  、onmouseout ： 支持事件的冒泡 ；



    </script>
</body>
</html>